<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新增食品</title>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.4/lib/index.css">
    <link rel="stylesheet" href="../global.css">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vant@2.4/lib/vant.min.js"></script>
</head>
<style>
    .van-cell__value {
        overflow: initial;
    }
</style>
<body>
<!--<div class="bg"></div>-->
<div id="app">
    <van-row>
        <van-col span="24">
            <van-nav-bar
                    title="新增/编辑"
                    left-text="返回"
                    left-arrow
                    @click-left="onClickLeft"
            >
                <template #right>
                    <van-button style="margin: 8px 0;border-radius: 4px" size="small" square
                                color="linear-gradient(to right, #4bb0ff, #6149f6)" block>保存
                    </van-button>
                </template>
            </van-nav-bar>
        </van-col>
        <van-col span="24">
            <div class="box"></div>
        </van-col>
        <van-col span="24">
            <van-divider dashed>必填信息</van-divider>
            <van-form @submit="onSubmit">

                <div class="bg-f9 p-3" style="position: relative">
                    <button class="bg-f9 color-main border-0">删除</button>
                    <van-field
                            v-model="username"
                            name="食物名称"
                            label="食物名称"
                            placeholder="食物名称"
                            :rules="[{ required: true, message: '请填写食物名称' }]"
                    ></van-field>

                    <van-field
                            v-model="username"
                            name="热量"
                            label="热量"
                            placeholder="例如（1000千卡）"
                            :rules="[{ required: true, message: '请填写热量' }]"
                    ></van-field>

                    <van-field
                            readonly
                            clickable
                            name="picker"
                            :value="value"
                            label="选择单位"
                            placeholder="请选择"
                            @click="showPicker = true"
                    >
                    </van-field>
                    <van-popup v-model="showPicker" position="bottom">
                        <van-picker
                                show-toolbar
                                :columns="columns"
                                @confirm="onConfirm"
                                @cancel="showPicker = false"
                        />
                    </van-popup>
                </div>

                <div class="bg-f9 p-3" style="position: relative">
                    <button class="bg-f9 color-main border-0">删除</button>
                    <van-field
                            v-model="username"
                            name="食物名称"
                            label="食物名称"
                            placeholder="食物名称"
                            :rules="[{ required: true, message: '请填写食物名称' }]"
                    ></van-field>

                    <van-field
                            v-model="username"
                            name="热量"
                            label="热量"
                            placeholder="例如（1000千卡）"
                            :rules="[{ required: true, message: '请填写热量' }]"
                    ></van-field>

                    <van-field
                            readonly
                            clickable
                            name="picker"
                            :value="value"
                            label="选择单位"
                            placeholder="请选择"
                            @click="showPicker = true"
                    >
                    </van-field>
                    <van-popup v-model="showPicker" position="bottom">
                        <van-picker
                                show-toolbar
                                :columns="columns"
                                @confirm="onConfirm"
                                @cancel="showPicker = false"
                        />
                    </van-popup>
                    <div class="pt-3">
                        <van-button color="#349aff" plain style="border-radius: 4px" square block>新增
                        </van-button>
                    </div>
                </div>
            </van-form>
        </van-col>
        <van-col span="24">
            <van-divider dashed>选填信息</van-divider>
            <van-form @submit="onSubmit">
                <van-field name="uploader" label="文件上传">
                    <template #input>
                        <van-uploader v-model="uploader"/>
                    </template>
                </van-field>
                <van-field
                        v-model="username"
                        name="脂肪"
                        label="脂肪"
                        placeholder="单位:g"
                        :rules="[{ required: true, message: '请填写食物名称' }]"
                ></van-field>
                <van-field
                        v-model="username"
                        name="蛋白质"
                        label="蛋白质"
                        placeholder="单位:g"
                        :rules="[{ required: true, message: '请填写食物名称' }]"
                ></van-field>
                <van-field
                        v-model="username"
                        name="碳水化合物"
                        label="脂碳水化合物肪"
                        placeholder="单位:g"
                        :rules="[{ required: true, message: '请填写食物名称' }]"
                ></van-field>
                </van-field>
                <van-field name="checkboxGroup" label="标签">
                    <template #input>
                        <van-checkbox-group v-model="checkboxGroup" direction="horizontal">
                            <van-checkbox class="d-inline-flex mr-2" name="1" shape="square">标签1</van-checkbox>
                            <van-checkbox class="d-inline-flex mr-2" name="2" shape="square">标签2</van-checkbox>
                            <van-checkbox class="d-inline-flex mr-2" name="3" shape="square">标签3</van-checkbox>
                            <van-checkbox class="d-inline-flex mr-2" name="4" shape="square">标签4</van-checkbox>
                        </van-checkbox-group>
                    </template>
                </van-field>
                <van-field
                        v-model="message"
                        rows="2"
                        autosize
                        label="描述"
                        type="textarea"
                        maxlength="50"
                        placeholder="请输入描述"
                        show-word-limit
                ></van-field>
                <van-field
                        v-model="message"
                        rows="2"
                        autosize
                        label="其他营养素"
                        type="textarea"
                        maxlength="50"
                        placeholder="请输入其他营养素"
                        show-word-limit
                ></van-field>
            </van-form>
        </van-col>
    </van-row>
</div>
</body>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                username: '',
                password: '',
                value: '',
                columns: ['个', '份', '瓶'],
                showPicker: false,
                uploader: [{url: 'https://img.yzcdn.cn/vant/leaf.jpg'}],
                checkbox: false,
                checkboxGroup: [],
                message: '',
            };
        },
        methods: {
            onClickLeft() {
                Toast('返回');
            },
            onSubmit(values) {
                console.log('submit', values);
            },
            onConfirm(value) {
                this.value = value;
                this.showPicker = false;
            },
        },
    });
</script>
</html>